// 这个例子传递了初始化函数，因此 createInitialTodos 函数仅在初始化期间运行。
// 当组件重新渲染，例如你在输入框中键入内容时，它不会再次运行。

import { useState } from 'react';

function createInitialTodos() {
  // console.log('传递初始化函数 Creating initial todos...');
  const initialTodos = [];
  for (let i = 0; i < 10; i++) {
    initialTodos.push({
      id: i,
      text: 'Item ' + (i + 1),
    });
  }
  return initialTodos;
}

export default function DeliverFuncc() {
  const [todos, setTodos] = useState(createInitialTodos);
  const [text, setText] = useState('');
  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button
        onClick={() => {
          setText('');
          setTodos([
            {
              id: todos.length,
              text: text,
            },
            ...todos,
          ]);
        }}
      >
        Add
      </button>
      <ul>
        {todos.map((item) => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    </>
  );
}
